<template>
  <div class="device-gateway">
    <devicePanel
      :panel-data="gatewayPanelData"
      :common-type="deviceInfo.commonType"
      :sn="deviceInfo.serialNumber"
      :groupId="deviceInfo.groupId"
      :productClass="deviceInfo.productClass"
      :select-port="portselect"
      @childSelectPort="selectPort"
    >
      <template slot="legend">
        <div class="gatewayPanel">
          <ul class="explanin">
            <li>
              <icon-font
                type="ic-port-electric"
                style="color: #20b0ee; font-size: 16px"
              />{{ $t('deviceDetail.wan') }}
            </li>
            <li>
              <icon-font
                type="ic-port-electric"
                style="color: #018903; font-size: 16px"
              />{{ $t('deviceDetail.lan') }}
            </li>
            <li>
              <icon-font
                type="ic-port-electric"
                style="color: #000; font-size: 16px"
              />{{ $t('deviceDetail.disconnected') }}
            </li>
            <li>
              <icon-font
                type="ic-port-electric"
                style="color: #ddd; font-size: 16px"
              />{{ $t('deviceDetail.disabled') }}
            </li>
          </ul>
          <ul class="explanin">
            <li>
              <icon-font type="ic-port-PPPOE" style="font-size: 16px" />PPPoE
            </li>
            <li>
              <icon-font type="ic-port-staticIP" style="font-size: 16px" />{{
                $t('deviceDetail.staticip')
              }}
            </li>
            <li>
              <icon-font type="ic-port-DHCP" style="font-size: 16px" />DHCP
            </li>
            <li>
              <icon-font type="ic-port-POE" style="font-size: 16px" />{{
                $t('deviceDetail.poe')
              }}
            </li>
            <li>
              <icon-font type="ic-port-POEabnormal" style="font-size: 16px" />{{
                $t('deviceDetail.powererror')
              }}
            </li>
            <li>
              <icon-font
                type="ic-port-electric"
                style="font-size: 16px; color: #ddd"
              />{{ $t('deviceDetail.copper') }}
            </li>
            <li>
              <icon-font
                type="ic-port-light"
                style="font-size: 16px; color: #ddd"
              />{{ $t('deviceDetail.sfp') }}
            </li>
          </ul>
        </div>
      </template>
      <template slot="ports" slot-scope="{ port, index }">
        <icon-font
          :type="getDevicePanelPortIcon(port.mediumType)"
          :rotate="index % 2 == 0 ? 0 : 180"
          :disabled="isDisabled(port)"
          :class="['port-icon', checkSpeed(port), checkDisable(port)]"
          :style="isDisabled(port) ? 'cursor:not-allowed' : ''"
        /><icon-font
          v-if="checkIcon(port) != 'false' ? true : false"
          class="port-subscript"
          :type="checkIcon(port)"
        />
      </template>
    </devicePanel>
    <p class="panel-Exp">{{ $t('deviceDetail.select') }}</p>
  </div>
</template>
<script>
import { devicePanel } from '@components';
import {
  getDevicePanelPortIcon,
  getDevicePanelLayout,
} from '@utils/deviceTools';
import { mapState } from 'vuex';
export default {
  name: 'gatewayCommonPanel',
  props: {
    deviceInfo: {
      type: Object,
      default: () => {},
    },
    portselect: {
      type: Array,
      default: () => [],
    },
    disabledWanLan: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      gatewayPanelData: [],
    };
  },
  components: {
    devicePanel,
  },
  computed: {
    ...mapState('DeviceDetail', {
      portsMap: (state) => {
        // console.log('My this is : ', this);
        const portsData = state.gateWay.currentDevicePortsData;
        const map = {};
        portsData.forEach((item) => {
          if (item.port !== null && item.port !== undefined)
            map[`1_0_${item.port}`] = item;
        });
        return map;
      },
      portsInfoMap: (state) => {
        const portsData = state.gateWay.currentDevicePortsDataInfo;
        const map = {};
        portsData.forEach((item) => {
          if (item.port !== null && item.port !== undefined) {
            map[`1_0_${item.port}`] = item;
          }
        });
        return map;
      },
    }),
  },
  mounted() {
    this.initPanel();
  },
  methods: {
    getDevicePanelPortIcon,
    async initPanel() {
      await this.getGatewayLayoutData();
    },
    selectPort(data) {
      this.$emit('selectPort', data, this.portsInfoMap);
    },
    async getGatewayLayoutData() {
      this.gatewayPanelData = await getDevicePanelLayout(
        this.deviceInfo.serialNumber, //设备序列号
        this.deviceInfo.productClass, //设备型号
        this.$store //缓存
      );
    },
    isDisabled(port) {
      if (this.portsInfoMap[port.portorder]) {
        const item = this.portsInfoMap[port.portorder];
        return this.disabledWanLan.includes(item.type) ? true : false;
      } else {
        return false;
      }
    },

    checkDisable(port) {
      let disableClass = '';
      let portData = this.portsInfoMap[port.portorder];
      //判断
      if (portData) {
        //判断光电复用口
        if (
          portData.mediumType &&
          portData.mediumType.toLowerCase() != port.mediumType.toLowerCase()
        ) {
          disableClass = 'disbaled';
        }
        //判断端口是否关闭
        if (portData.enable == 'false') {
          disableClass = 'disbaled';
        }
      } else {
        disableClass = 'disbaled';
      }
      return disableClass;
    },

    checkSpeed(port) {
      let speedClass = '';
      const portGwInfo = this.portsInfoMap[port.portorder];
      if (portGwInfo) {
        speedClass = this.formatterGwSpeed(portGwInfo);
      }
      return speedClass;
    },

    checkIcon(port) {
      if (!this.portsInfoMap[port.portorder]) {
        return 'false';
      }
      const item = this.portsInfoMap[port.portorder];
      if (item.pppoe == 'true') {
        //PPPoE端口
        return 'ic-port-PPPOE';
      }
      let ipType = item.ipType.toLowerCase();
      if (ipType == 'dhcp') {
        //DHCP端口
        return 'ic-port-DHCP';
      } else if (ipType == 'static') {
        //静态IP端口
        return 'ic-port-staticIP';
      }

      if (item.poeStatus == 'On') {
        //POE供电
        return 'ic-port-POE';
      } else if (item.poeStatus == 'Erroneous') {
        //POE供电异常
        return 'ic-port-POEabnormal';
      }
    },
    formatterGwSpeed(portInfo) {
      let speedClass = '';
      if (portInfo.linestatus == 'true' && portInfo.adminstatus == 'true') {
        const type = portInfo.type;
        if (type == 'WAN') {
          speedClass = 'blue';
        } else {
          speedClass = 'green';
        }
      } else if (portInfo.adminstatus != 'true') {
        //关闭的端口
        speedClass = 'disbaled';
      } else {
        speedClass = 'black';
      }
      return speedClass;
    },
  },
};
</script>
<style lang="less" scoped>
.device-gateway {
  /deep/.panel-line {
    justify-content: center;
  }
  /deep/ .port-title {
    font-size: 10px;
    transform: scale(0.7);
  }
  /deep/ .port-elem {
    position: relative;
    display: flex;
    justify-content: center;
  }
  /deep/ .port {
    width: 60px;
  }
}
.port-icon {
  color: @portBlack;
  font-size: 30px;
  &.green {
    color: @portGreen;
  }
  &.blue {
    color: @portBlue;
  }
  &.red {
    color: @portRed;
  }
  &.disbaled {
    color: @portDisabled;
  }
}
.port-subscript {
  position: absolute;
  background-color: #fff;
  color: #0071eb;
  border-radius: 6px;
  font-size: 16px;
  right: 8px;
  bottom: 0px;
}
.gatewayPanel {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .explanin {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    margin: 3px 4px;
    flex-flow: wrap;
    li {
      margin-left: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      flex-flow: column;
    }
  }
}
.panel-Exp {
  color: #ccc;
  text-align: right;
}
.empty {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
